﻿@model ScrumTracker.Models.Story
@{
    Layout = "~/Views/Shared/_Layout2.cshtml";
    ViewBag.Title = "Edit";
}
@if (false)
{
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
@section head{
    <style type="text/css">
        ul > li
        {
            display: block;
            margin-top: 0.5em;
        }
        
        ul > li:first-child
        {
            margin-top: 0;
        }
        
        li > a.button
        {
            width: 190px;
        }
        
        body
        {
            overflow: auto;
        }
        
        .display-model
        {
            margin: 5px 0;
            padding: 5px;
        }
        
        .display-label
        {
            display: block;
            margin: 8px 0 2px 0;
        }
        
        .display-label:first-child
        {
            margin-top: 0;
        }
        
        .display-field > *
        {
            border: 1px solid #ccc;
            background-color: #eee;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 2px;
            margin: 0;
        }
        
        .display-field > p
        {
            width: 500px;
        }
        
        .display-field > span
        {
            display: block;
            width: 250px;
        }
        
        .data-table
        {
            width: 100%;
        }
        .data-table td
        {
            text-align: center;
        }
        .data-table .multiline-text
        {
            width: 33%;
            text-align: left;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
            $('.button').button();
            $('.draggable').draggable({
                cursorAt: { top: -5, left: -5 },
                helper: function (event) {
                    console.log($(this));
                    var row = this;

                    return $('<div class="ui-widget-header"></div>').text("Move issue #" + $(this).closest('tr').attr('issue_id')).appendTo('body');
                }
            });
            $(".droppable").droppable({
                tolerance: "pointer",
                hoverClass: "ui-state-active",
                drop: function (event, ui) {
                    //$(this).addClass("ui-state-highlight").text("Dropped!");
                    console.log($(ui.draggable).closest('tr').attr('issue_id'), $(this).attr('sprint_id'));
                    var issueId = $(ui.draggable).closest('tr').attr('issue_id');
                    var sprintId = $(this).attr('sprint_id');
                    var updateUrl = '@(Url.Action("Update", "Stories", new { id = "issue_id" }))'.replace('issue_id', issueId);

                    $.ajax({
                        url: updateUrl,
                        type: 'POST',
                        dataType: 'json',
                        data: JSON.stringify({ SprintId: sprintId }),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            $(ui.draggable).fadeOut(function () {
                                $(this).closest('tr').remove();
                            });
                        }
                    });
                }
            });

            $('.expandable').click(function () {
                var row = $(this).closest('tr');
                $('<td></td>').text('html').attr('colspan', 8).appendTo('<tr></tr>').insertAfter(row);
            });
        });
    </script>
}
<h1>@Model.Product.Name</h1>
<hr />
<div class="ui-widget ui-widget-content ui-corner-all" style="float: left; padding: 0.2em;">
    <ul style="list-style-type: none; padding: 0; margin: 0;">
        <li>
            <a class="button ui-state-highlight" href="@Url.Action("Get", "Products", new { @id = Model.ProductId })">Backlog</a></li>
        <li>
            <hr />
        </li>
        @foreach (var sprint in Model.Product.Sprints.OrderByDescending(s => s.EndDate))
        {
            <li>
                <a class="button droppable" href="@Url.Action("Get", "Sprints", new { @id = sprint.SprintId })" sprint_id="@sprint.SprintId">@sprint.Name</a></li>
        }
    </ul>
</div>
<div class="ui-widget ui-widget-content ui-corner-all" style="float: none; margin-left: 211px; padding: 0.2em;">
    <div style="border-bottom: 1px dotted Gray; margin-bottom: 5px; padding-bottom: 2px; text-align: right;">
        <a href="@Url.Action("Edit", "Stories", new { @id = Model.IssueId })" class="button">Edit</a>
    </div>
    <div class="display-model">
        @Html.DisplayForModel()
    </div>
    <div id="tabs" style="overflow: hidden;">
        <ul>
            <li>
                <a href="#tasks">Tasks</a></li>
            <li>
                <a href="#comments">Comments</a></li>
        </ul>
        <div id="tasks">
            <div style="border-bottom: 1px dotted Gray; margin-bottom: 5px; padding-bottom: 2px; text-align: right;">
                <a href="@Url.Action("New", "Tasks", new { StoryId = Model.IssueId })" class="button">Add Task</a>
            </div>
            @{
                var grid = new WebGrid(Model.Tasks.OrderByDescending(a => a.EstimatedHours), canPage: false, canSort: false);
                grid.Column("Test");
                @grid.GetHtml(tableStyle: "data-table", headerStyle: "ui-widget-header",
                columns:
                    grid.Columns(grid.Column(columnName: "Description", style: "multiline-text"),
                    grid.Column(columnName: "AssigneeName", header: "Assignee"),//, format: @<b>@item.Assignee.ToString()</b>),
                    grid.Column("EstimatedHours"),
                    grid.Column("PercentDone"),
                    grid.Column(format: @<span><a href="@Url.Action("Edit", "Tasks", new { @id = item.IssueId })" rel="edit" class="button">Edit</a><a href="#" rel="delete" class="button">Delete</a></span>)
                    )
                )
            }
        </div>
        <div id="comments">
        </div>
    </div>
</div>
